<template>
  <div class="chart-container">
    <div class="echarts-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'; // 导入echarts库

export default {
  props: {
    dataset: {
      type: Array,
      required: true
    }
  },
  mounted() {
    // 获取容器元素
    var chartDom = this.$el.querySelector('.echarts-chart');
    // 初始化 ECharts 实例
    var myChart = echarts.init(chartDom);
    // 设置图表选项
    var option = {
      legend: {},
      tooltip: {},
      dataset: {
        source: this.dataset
      },
      xAxis: { type: 'category' },
      yAxis: {
        type: 'value',
        min: 0,
        max: 5000,
        interval: 1000
      },
      series: [
        { type: 'bar', itemStyle: { color: 'rgba(0, 128, 0, 0.5)' } }, // 发电量为绿色，透明度为0.5
        { type: 'bar', itemStyle: { color: 'rgba(255, 255, 0, 0.5)' } }, // 发电量为黄色，透明度为0.5
        { type: 'bar', itemStyle: { color: 'rgba(255, 0, 0, 0.5)' } } // 总辐射量为红色，透明度为0.5
      ]
    };
    // 设置图表选项
    myChart.setOption(option);
  }
};
</script>

<style scoped>
.chart-container {
  width: 150%; /* 设置容器宽度为组件宽度的120% */
  margin-left: 30px; /* 向右偏移20px */
  margin-top: 30px; /* 向下偏移20px */
}

.echarts-chart {
  width: 100%;
  height: 300px; /* 设置图表高度 */
}
</style>
